import React from 'react'

class ListOfWords extends React.PureComponent<{ words: string[] }> {
    render() {
        return <div>{this.props.words.join(',')}</div>
    }
}

class WordAdder extends React.Component<any, { words: string[] }> {
    constructor(props: any) {
        super(props)
        this.state = { words: ['first'] }
        console.log('cnstructor');
    }
    static getDerivedStateFromProps(props: any, state: any) {
        console.log('getDerivedStateFromProps')
        console.log(props, state)
        return state
    }
    UNSAFE_componetWillMount() {
        console.log('UNSAFE_componetWillMount')
    }
    shouldComponentUpdate() {
        console.log('shouldComponentUpdate')
        return true
    }
    componentDidMount() {
        console.log('componentDidMount')
    }
    handleClick = () => {
        this.setState(state => ({ words: [...state.words, 'second'] }))
    }
    render() {
        console.log('render')
        return (
            <div>
                <button onClick={this.handleClick}>添加</button>
                <ListOfWords words={this.state.words} />
            </div>
        )
    }
}

export default WordAdder;